<template>
	<div >
		<el-table :data="tableData" style="width: 100%" stripe>
			<el-table-column prop="_id" label="id" width="60">
				<template slot-scope="tableData">
					<p>{{tableData.$index + 1}}</p>
				</template>
			</el-table-column>
			<el-table-column prop="name" label="保障服务" width="140">

				<template slot-scope="scope">
					<div class="ensure" :style="{'backgroundColor': '#' + scope.row.typeColor}">
						{{scope.row.name}}
					</div>
				</template>

			</el-table-column>
			<el-table-column prop="price" label="服务介绍">
				<template slot-scope="scope">
					<p>{{ scope.row.add_time }}</p>
				</template>
			</el-table-column>

			<el-table-column prop="price" label="启动时间">
				<template slot-scope="scope">
					<p>{{ scope.row.add_time }}</p>
				</template>
			</el-table-column>
			<el-table-column label="状态" width="60">
				<template slot-scope="scope">
					<el-switch v-model="scope.row.state" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
				</template>
			</el-table-column>
			<el-table-column prop="add_time" label="操作">
				<template slot-scope="scope">
					<!-- 编辑 -->
					<el-button size="mini" type="primary" icon="el-icon-edit" circle
						@click="clickEdit(scope.$index,scope.row)"></el-button>
					<!-- 暂停 -->
					<el-button size="mini" type="success" icon="el-icon-error" circle
						@click="clickSuspend(scope.$index,scope.row)"></el-button>
					<!-- 删除 -->
					<el-button size="mini" type="danger" icon="el-icon-delete" circle
						@click="clickRemove(scope.$index,scope.row)"></el-button>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				tableData: [{
					state: 1
				}]
			}
		},

		methods: {

			// 点击删除服务
			clickRemove(index, row) {
				console.log('点击了删除服务', index, row);
			},
			// 点击暂停服务
			clickSuspend(index, row) {
				console.log('点击了暂停服务', index, row);
			},
			// 点击编辑服务
			clickEdit(index, row) {
				console.log('点击了编辑服务', index, row);
			}
		},
		computed: {

			timeFilter(time) {
				return time
				
			}
		},
		beforeMount() {
			let api = "https://a96e60da-e53e-4022-bbe6-87b5c3b98d0c.bspapp.com/getensure"
			this.$axios.get(api).then(res => {
				this.tableData = res.data.data
			})
		}
	}
</script>

<style scoped="scoped">
	
	.ensure{
		width: 100%;
		padding: 6px 0px;
		text-align: center;
		display: inline-block;
		background-color: #00ABFD;
		border-radius: 18px;
		color: #fff;
	}
	
</style>
